<template>
  <div>
    <h1>欢迎来到系统首页</h1>
    <div class="container">
      <div class="one">
        <div class="left">
          <div class="icons">
            <!-- <span class="iconfont">&#xe61d;</span> -->
            <span>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shuliang-copy-copy"></use>
              </svg>
            </span>
          </div>
        </div>
        <div class="right">
          <span>商品总数量</span>
          <p>{{ foodTotal }}</p>
        </div>
      </div>
      <div class="two" @click="twoBtn">
        <div class="left">
          <div class="icons">
            <!-- <span class="iconfont">&#xe61d;</span> -->
            <span>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zongxiaoliang-copy"></use>
              </svg>
            </span>
          </div>
        </div>
        <div class="right">
          <span>商品总销量</span>
          <p>{{ foodNumber }}</p>
        </div>
      </div>
      <div class="three" @click="threeBtn">
        <div class="left">
          <div class="icons">
            <span>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-chongzhijine"></use>
              </svg>
            </span>
          </div>
        </div>
        <div class="right">
          <span>商品总金额</span>
          <p>{{ foodMoney }}</p>
        </div>
      </div>
      <div class="four">
        <div class="left">
          <div class="icons">
            <span>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-leibie-copy"></use>
              </svg>
            </span>
          </div>
        </div>
        <div class="right">
          <span>商品总类数</span>
          <p>{{ arr }}</p>
        </div>
      </div>
    </div>
    <div class="echatsMap" ref="className"></div>
  </div>
</template> 


<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      destroy: true,
      className: "echars",
      tableData: [],
      foodTotal: 0, //商品总数量
      foodNumber: 0, //销售总销量
      foodMoney: 0, //销售总金额
      foodClass: [], //商品总类数
      arr: 0,

      //统计每类营业额
      saleMoney: [],
      sellers: [],

      //统计前十商品销售量
      tenGood: [],
      tenGoodsName: [],
      tenGoodsNumber: [],

      //统计前十商品营业额
      tenMoney: [],
      tenGoodsFoodName: [],
      tenGoodsFoodMoney: [],
    };
  },
  computed:{
    //  userId() {
    //    return this.$route.params.userId
    //  }
  },
  //获取全部商品数据
  created() {
    //调用接口函数
    this.$axios({
      url: "http://120.78.198.18:89/food/GetFoodList",
      method: "post",
    }).then((res) => {
      // console.log(res);
      this.tableData.push(res.data.data);
      for (let food of this.tableData) {
        // console.log(food);
        this.foodTotal = food.length; //求总数量
        for (let foods of food) {
          // console.log(foods);
          this.foodNumber += foods.FoodQuantity; //总销量
          this.foodMoney += foods.FoodPrice * foods.FoodQuantity; //销售总金额
          this.foodClass.push(foods.FoodCategory);
        }
        this.foodClass = new Set(this.foodClass);
        // console.log(this.foodClass);
        this.arr = this.foodClass.size; //总类数
      }
    });
  },
  mounted() {
    this.drawMoney();
  },
  methods: {
    drawMoney() {
      this.$axios({
        url: "http://120.78.198.18:89/food/GetFoodMoneyList",
        method: "post",
      }).then((res) => {
        this.saleMoney.push(res.data.data);
        for (let sale of this.saleMoney) {
          for (let sales of sale) {
            this.sellers.push(sales.Money);
          }

          let saleMoneys = this.$echarts.init(this.$refs.className);
          //构造折线图
          let option = {
            color: "#00bcd5",
            title: {
              text: "各类营业额(单位:元)",
              color: "#04cdcf",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#6a7985",
                },
              },
            },
            legend: {
              data: ["Sales"],
            },
            toolbox: {
              feature: {
                saveAsImage: {},
              },
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                data: [
                  "1.新鲜蔬菜",
                  "2.时令水果",
                  "3.粮油干货",
                  "4.肉蛋水产",
                  "5.新鲜肉类",
                  "6.速冻速食",
                  "7.休闲零食",
                  "8.酒水饮料",
                  "9.牛奶水饮",
                ],
              },
            ],
            yAxis: [
              {
                type: "value",
              },
            ],
            series: [
              {
                name: "Sales",
                type: "line",
                stack: "Total",
                areaStyle: {
                  opacity: 0.8,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(48, 255, 191,1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(22,201, 145, 0.31)",
                    },
                  ]),
                },
                emphasis: {
                  focus: "series",
                },
                //金额数组
                data: this.sellers,
              },
            ],
          };
          saleMoneys.setOption(option);
        }
      });
    },
    twoBtn() {
      // this.className = "tenSaller";
      this.$axios({
        // url: "http://localhost:64352/food/GetFoodTenList",
        url: "http://120.78.198.18:89/food/GetFoodTenList",
        method: "post",
      }).then((res) => {
        this.tenGoodsName == [],
          this.tenGoodsNumber == [],
          this.tenGood.push(res.data.data);
        for (let good of this.tenGood) {
          for (let goods of good) {
            this.tenGoodsName.push(goods.FoodName);
            this.tenGoodsNumber.push(goods.FoodQuantity);
          }
        }

        let saleMoneys = this.$echarts.init(this.$refs.className);
        let option = {
          title: {
            text: "商品销量前十排名",
            subtext: "销量(单位:件)",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: this.tenGoodsName,
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                margin: 30,
                show: true,
                interval: "auto",
              },
            },
          ],
          legend: {
            data: ["销量"],
          },
          series: [
            {
              name: "销量",
              type: "bar",
              barWidth: "60%",
              data: this.tenGoodsNumber,
            },
          ],
        };
        // saleMoneys.setOption(option, true);
        // 数据改变之后，在nextTick刷新chart
        this.$nextTick(() => {
          saleMoneys.setOption(option, true);
        });
      });
    },
    threeBtn() {
      console.log(this.className);
      this.$axios({
        url: "http://120.78.198.18:89/food/GetFoodTenMoneyList",
        method: "post",
      }).then((res) => {
        this.tenMoney.push(res.data.data);
        for (let numMoney of this.tenMoney) {
          for (let numMoneys of numMoney) {
            this.tenGoodsFoodName.push(numMoneys.FoodName);
            this.tenGoodsFoodMoney.push(numMoneys.money);
          }
        }
        console.log(this.tenGoodsFoodName);
        console.log(this.tenGoodsFoodMoney);

        let saleVolume = this.$echarts.init(this.$refs.className);
        let option2 = {
          title: {
            text: "营业额商品前十排名",
            subtext: "营业额(单位:元)",
          },
          xAxis: {
            type: "category",
            data: this.tenGoodsFoodName,
          },
          yAxis: [
            {
              type: "value",
              axisLabel: {
                margin: 50,
                show: true,
                interval: "auto",
              },
            },
          ],
          legend: {
            data: ["营业额"],
          },
          series: [
            {
              name: "营业额",
              data: this.tenGoodsFoodMoney,
              type: "bar",
              showBackground: true,
              backgroundStyle: {
                // color: "rgba(180, 180, 180, 0.2)",
              },
            },
          ],
        };
        saleVolume.setOption(option2);
      });
    },
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@font-face {
  font-family: "iconfont";
  src: url("../assets/font/iconfont.woff2?t=1638945058113") format("woff2"),
    url("../assets/font/iconfont.woff?t=1638945058113") format("woff"),
    url("../assets/font/iconfont.ttf?t=1638945058113") format("truetype");
}
h1 {
  position: absolute;
  left: 200px;
  top: 80px;
}
.container {
  float: left;
  margin: 40px auto;
  width: 1280px;
  height: 100px;
  /* background-color: pink; */
}
.one,
.two,
.three,
.four {
  float: left;
  width: 280px;
  height: 100%;
  background-color: skyblue;
  margin-left: 30px;
  border-radius: 10px;
  cursor: pointer;
}
.one {
  background: rgb(90, 201, 255);
}
.one:hover {
  background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
.two {
  background: rgb(49, 179, 141);
}
.two:hover {
  background-image: linear-gradient(
    to right,
    #eea2a2 0%,
    #bbc1bf 19%,
    #57c6e1 42%,
    #b49fda 79%,
    #7ac5d8 100%
  );
}
.three {
  background: rgb(118, 56, 199);
}
.three:hover {
  background-image: linear-gradient(-20deg, #d558c8 0%, #24d292 100%);
}
.four {
  background: rgb(59, 103, 163);
}
.four:hover {
  background-image: linear-gradient(
    60deg,
    #3d3393 0%,
    #2b76b9 37%,
    #2cacd1 65%,
    #35eb93 100%
  );
}
.left {
  float: left;
  width: 130px;
  height: 100%;
  line-height: 100px;
  /* background-color: blue; */
}
.left .icons span {
  overflow: hidden;
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin: 10px auto;
  border-radius: 50%;
  font-size: 60px;
}
.left .iconfont {
  font-size: 50px;
}
.right {
  height: 100%;
  text-align: left;
}
.right span {
  display: inline-block;
  line-height: 50px;
  font-size: 14px;
  color: #fff;
}
.right p {
  font-size: 25px;
  color: #fff;
}

.echatsMap {
  position: absolute;
  left: 204px;
  bottom: 10px;
  width: 80%;
  height: 460px;
  /* background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); */
  /* background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%); */
  /* background-image: linear-gradient(to top, #d299c2 0%, #fef9d7 100%); */
  background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}
</style>